<template>
  <div class="teacher-container">
    <h1>教师工作台</h1>
    <div class="teacher-info">
      <p>教师ID: {{ userId }}</p>
      <p>用户名: {{ userInfo.username }}</p>
      <img v-if="userInfo.pic" :src="userInfo.pic" alt="教师头像" class="avatar">
    </div>
    <!-- 教师专属内容 -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

const route = useRoute();
const authStore = useAuthStore();

const userId = ref(route.params.id);
const userInfo = ref(authStore.userInfo);

onMounted(() => {
  console.log('教师页面加载，ID:', userId.value);
});
</script>

<style scoped>
.teacher-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-top: 10px;
}

.teacher-info {
  margin-top: 20px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}
</style>